<template>
  <el-dialog title="成员列表" :visible.sync="dialogFormVisible" :before-close="handleClose">
    <el-input
        placeholder="搜索（多个关键字用空格隔开）"
        v-model="keyWord"
        clearable>
    </el-input>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="成员" name="first">
        <template>
          <el-transfer
              v-model="value"
              :data="data"
              :titles="['全部成员', '已选成员']"
              filterable
              :filter-method="filterMethod"
              @change="handleTransferChange">
          </el-transfer>
        </template>
      </el-tab-pane>
      <el-tab-pane label="当前成员" name="second"></el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "ChooseEmployeeView",
  props: {
    open: {
      type: Boolean,
    },
  },
  data() {
    const generateData = names => {
      return names.map((name, index) => ({
        label: name, // 成员名字作为 label
        key: index   // 使用索引作为唯一标识
      }));
    };
    return {
      dialogFormVisible: this.open,//控制选择成员组件显示
      activeName: 'first',
      keyWord: "",//后续进行关键字搜索
      data: [], // 穿梭框所需的数据
      value: [], // 已选中的成员 key 数组
      // 左侧选中的值
      leftSelectedKey: null,
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1; // 支持按名字过滤
      }
    };
  },
  created() {
    this.$axios.get("/manage/employee/list").then(response => {
      this.names = response.data.data.map(employee => employee.name);
      this.data = this.generateData(this.names);
    })
  },
  watch: {
    open: function (newVal, oldVal) {
      this.dialogFormVisible = newVal
    }
  },
  methods: {
    handleCancel() {
      this.dialogFormVisible = false
      this.$emit("close")
    },
    handleSubmit() {

      this.dialogFormVisible = false
      this.$emit("close")
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.$emit("close")
          })
          .catch(_ => {
          });
    },
    handleClick(tab, event) {
      console.log(tab, event);

    },
    generateData(names) {
      return names.map((name, index) => ({
        label: name,
        key: index
      }));
    },
    handleTransferChange(newTargetKeys, direction, moveData) {
      if (direction === "right") {
        // 如果是从左侧移动到右侧，限制右侧只能有一个值
        this.value = [newTargetKeys[newTargetKeys.length - 1]]; // 保留最后一个选中的值
      } else if (direction === "left") {
        // 如果是从右侧移动到左侧，清空右侧选中值
        this.value = [];
      }

      // 如果是仅在左侧选择（未发生左右移动）
      if (direction === "none") {
        const selectedLeftKeys = moveData.map(item => item.key);
        // 限制左侧只能有一个选中值
        if (selectedLeftKeys.length > 0) {
          this.leftSelectedKey = selectedLeftKeys[selectedLeftKeys.length - 1]; // 保留最后一个选中的值
        } else {
          this.leftSelectedKey = null; // 清空左侧选中值
        }
        // 动态更新左侧选中状态
        this.updateLeftSelection();
      }
    },
    updateLeftSelection() {
      // 遍历左侧数据，确保只有当前选中的项被选中
      this.data.forEach(item => {
        if (item.key === this.leftSelectedKey) {
          item.checked = true; // 当前选中的项设置为选中状态
        } else {
          item.checked = false; // 其他项取消选中状态
        }
      });
    }
  }
};
</script>
<style scoped>
/* 隐藏源列表中的多余选项 */
.el-transfer-panel__list.is-filterable .el-checkbox {
  display: none;
}

/* 显示当前选中的选项 */
.el-transfer-panel__list.is-filterable .el-checkbox.is-checked {
  display: block;
}
</style>